<template>
  <el-form label-position="top" class="flow-setting">
    <!--S 预览组件 -->
    <div v-if="showFormBuilder" class="flow-setting-left">
      <form-preview :fields="fields" class="flow-setting-form-preview">
        <div class="form-preview-box">
          <el-button
            type="primary"
            class="form-preview-btn"
            @click="openFormDesign"
          >
            {{ $t('event.setting.serviceEventTypeSetting.flow.component.settingFlowPreview.btn1') }}
          </el-button>
        </div>
      </form-preview>
    </div>
    <!--E 预览组件 -->

    <!--S 设置项 -->
    <div class="flow-setting-right" v-if="type === 'audit'">
      <div class="setting-specific">
        <!--S 审批设置 -->
        <div
          :class="['setting-specific-approve']"
        >
          <h2>{{$t('contract.setting.flow.title2')}}</h2>
          <approve-setting
            :options="auditOptions"
            :approve-setting="flowSetting.approveSetting"
            @change="(setting) => changeApproveSetting(setting, 'assign')"
          />
        </div>
        <!--E 审批设置 -->
      </div>
    </div>
    <!--E 设置项 -->

    <!-- 表单设置弹窗 -->
    <contract-fields-setting
      ref="taskFormSetting"
      mode="contract"
      :contractTemplateId="contractTemplateId"
      @success="refreshFields"
    ></contract-fields-setting>
  </el-form>
</template>

<script>
// components
import ApproveSetting from './ApproveSetting.vue';
import ContractFieldsSetting from '@src/modules/setting/contract/contractFieldsSetting/ContractFieldsSetting.vue';

import flowMap from '../flowMap';

import { contractFieldList } from '@src/api/ContractApi'
import { openAccurateTab } from '@src/util/platform'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { BaseSelectUserModeEnum } from '@src/component/common/BaseSelectUser'

export default {
  name: 'flow-setting',
  props: {
    type: {
      type: String,
      default: 'create',
    },
    flowSetting: {
      type: Object,
      default: () => ({}),
    },
    // 合同模板id
    contractTemplateId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fields: [],
      flowMap,
      auditUsers: [],

      auditOptions: this.approveOptions(),
    };
  },
  computed: {
    showFormBuilder() {
      // 展示表单组件
      return ['create'].includes(this.type);
    }
  },
  watch: {
    type: {
      handler: function (val) {
        if (val) {
          this.getContractFields(val);
        }
      },
      immediate: true
    }
  },
  methods: {
    /** 审批类型选项 */
    approveOptions() {
      let options = [
        {
          value: 'leader',
          label: this.$t('contract.setting.flow.label1'),
        },
        {
          value: 'users',
          label: this.$t('contract.setting.flow.label2'),
        },
        {
          value: 'userAdmin',
          label: this.$t('contract.setting.flow.label3'),
        },
        {
          value: 'promoter',
          label: this.$t('contract.setting.flow.label4'),
        },
      ];

      return options;
    },
    /**
     * 获取合同字段
     */
    async getContractFields() {
      if (this.type === 'create') {
        try {
          let res = await contractFieldList({
            templateId: this.contractTemplateId
          });

          if (res.code === 0) {
            this.fields = res.result;
          }
          
        } catch (error) {
          console.log('fetch contract getContractFields => err', error);
        }
      }
    },
    /**
     * 打开表单编辑器
     */
    openFormDesign() {
      this.$refs.taskFormSetting.open();
    },
    /** 更新审批设置 */
    changeApproveSetting(setting, key) {
      switch (key) {
      case 'assign':
        this.$set(this.flowSetting, 'approveSetting', setting);
        break;
      case 'reassign':
        this.$set(this.flowSetting, 'transferApprove', setting);
        break;
      default:
        break;
      }
    },
    /** 
     * @deprecated
    */
    /** 选择指定审批人员 */
    selectApproveUser(type) {
      let selected = [];

      let options = {
        title: ['overTime', 'planRemind'].includes(type) ? this.$t('contract.setting.flow.title2') : this.$t('contract.setting.flow.title3'), // [选填] 默认值为 '请选择人员'
        max: 14, // [选填]最大人数：当值小于等于0或者不填时，不对选择人数做限制，max值为1时单选，大于1时多选
        selectedUsers: selected, // [选填] 已选人员 每个人员必须包括userId,displayName,staffId,head这四个属性，只有带max大于1时生效
        mode: BaseSelectUserModeEnum.Filter
      };
      
      this.$fast.select.multi.user(options)
        .then((res) => {
          if (res.status != 0) return;
          this.auditUsers = res.data.users
        })
        .catch((err) => {
          console.warn(err);
        });
    },
    /** 刷新字段和表单必填人员 */
    refreshFields() {
      this.getContractFields();
    }
  },
  mounted() {
    // this.getContractFields()
  },
  components: {
    [ApproveSetting.name]: ApproveSetting,
    [ContractFieldsSetting.name]: ContractFieldsSetting,
  },
};
</script>

<style lang="scss" scoped>
.flow-setting {
  display: flex;
  .flow-setting-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background: #ffffff;
    margin-right: 12px;
    border-radius: 0 0 4px 4px;
    .flow-setting-form-preview {
      padding-top: 20px;
      ::v-deep .form-design-phone {
        height: calc(100% - 130px) !important;
      }
    }
    .form-edit-btn {
      margin-top: 12px;
    }

    .form-preview-box{
      position: absolute;
      bottom: 40px;
      left: 16px;
      z-index: 9;
      text-align: center;
      width: calc(100% - 32px);
      height: 50px;
      line-height: 50px;
      background: #ffffff;
      .form-preview-btn {
        width: calc(100% - 20px);
      }
    }
  }
  .flow-setting-right {
    min-width: 430px;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    .setting-specific {
      height: 100%;
      font-size: 14px;
      padding: 8px 20px 20px 20px;
      background: #ffffff;
      color: #999999;
      border-radius: 0 0 4px 4px;
      h2 {
        color: #333333;
        font-size: 14px;
        margin: 20px 0 8px 0;
      }
      p {
        line-height: 38px;
        margin-bottom: 0;
      }
      &-form {
        p {
          cursor: pointer;
          color: #666666;
          &:hover {
            color: $color-primary;
          }
        }
      }
      .set-review-question{
        color: $color-primary-light-6;
        line-height: normal;
        cursor: pointer;
      }
    }

    .setting-common {
      flex: 1;
      margin-top: 12px;
      font-size: 14px;
      background: #ffffff;
      padding: 8px 20px 20px 20px;
      border-radius: 4px;
      color: #999999;
      h2 {
        color: #333333;
        font-size: 14px;
        margin: 20px 0 8px 0;
      }
    }
  }
}

::v-deep .flow-setting-left {
  &>.form-design-main {
    margin: 24px 0 0 0;
    &>.form-design-center{
      height: 100%;
    }
  }
}

.w-87 {
  width: 87px;
}

.w-187 {
  width: 187px;
}

.ml-12 {
  margin-left: 12px;
}

.mt-8 {
  margin-top: 8px;
}

.mt-12{
  margin-top: 12px !important;
}

.mb-8 {
  margin-bottom: 8px;
}

.lh-38{
  line-height: 38px;
}

/** element style */
::v-deep .el-input{
  line-height: 38px;
}
::v-deep .el-checkbox{
  margin-bottom: 0;
}

</style>

<style lang="scss">
.setting-specific-overtime {
  .ui-input-block {
    display: inline-block;
    width: 200px;
    margin-right: 5px;
    .open-data {
      margin-right: 0;
    }
  }
  & > div {
    display: flex;
    align-items: center;
    flex-flow: wrap;
    .el-select {
      margin: 0 5px;
    }
  }
}
</style>